<template>
  <div>
    <div
      class="record-info"
      v-if='columnsNum===3'>
      <el-row
        v-for="(item,index) in recordForm"
        :key='index'
        :gutter="20">
        <el-col
          :span="8"
          v-for="(ite,ind) in item"
          :key="ind">
          <div>
            <!-- <span v-show="">{{item.label}}</span> -->
            <span class="left-span">{{ ite.label }}</span>
            <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="recordData[ite.key]+``"
            placement="top-start"> -->

            <span
              :class="{'right-span':!ite.show}"
              class="solt-span">
              <slot
                :name="ite.key"
                class="show-solt"
                v-if="ite.show"/>
            <custom-tooltip :value="(!ite.show&&recordData[ite.key]) || ``" /></span>
            <!-- </el-tooltip> -->
          </div>
        </el-col>
      </el-row>
      <slot
        name="recordInfoslot"
        :baseInfo="recordData"
        class="solt-info"
      />
    </div>
    <div
      class="record-info-two"
      v-if='columnsNum===2'>
      <el-row
        v-for="(item,index) in recordForm"
        :key='index'
        :gutter="24">
        <el-col
          :span="12"
          v-for="(ite,ind) in item"
          :key="ind">
          <div>
            <!-- <span v-show="">{{item.label}}</span> -->
            <span class="left-span">{{ ite.label }}</span>
            <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="recordData[ite.key]+``"
            placement="top-start"> -->
            <span
              :class="{'right-span':!ite.show}"
              class="solt-span"><slot
                :name="ite.key"
                class="show-solt"
                v-if="ite.show"/><custom-tooltip :value="(!ite.show&&recordData[ite.key]) || ``" /></span>
                <!-- </el-tooltip> -->
          </div>
        </el-col>
      </el-row>
      <slot
        name="recordInfoslot"
        :baseInfo="recordData"
        class="solt-info"
      />
    </div>
  </div>

</template>
<script>
import CustomTooltip from '@components/custom-tooltip'
export default {
  name: 'RecordInfo',
  components: { CustomTooltip },
  props: {
    recordData: {
      type: Object,
      default: () => {}
    },
    recordForm: {
      type: Array,
      default: () => []
    },
    columnsNum: {
      type: Number,
      default: 3
    }
  },
  computed: {},
  mounted () {
  }
}
</script>
<style lang="less">
.record-info {
  margin: 16px;
  // border: 1px solid #a7b1c7;
  .el-row {
    margin: 10px;
    .el-col {
      .left-span {
        font-size: 14px;
        color: #a7b1c7;
        width: max-content;
        text-align: right;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
      }
      .right-span {
        // margin-left: 16px;
        padding-left: 16px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 14px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        width: 70%;
        button {
          vertical-align: top;
        }
      }
      .solt-span {
        padding-left: 16px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 14px;
        white-space: wrap;
        width: 70%;
        button {
          vertical-align: top;
        }
      }
    }
  }
  .solt-info {
    span {
      margin-right: 30px;
      color: #a7b1c7;
      font-size: 16px;
      span {
        padding: 0 8px;
        color: black;
        font-size: 16px;
      }
      .price {
        color: red !important;
      }
    }
  }
  .show-solt {
    width: 200%;
  }
}
.record-info-two {
  // background-color: red;
  margin: 16px;
  // border: 1px solid #a7b1c7;
  .el-row {
    margin: 10px;
    .el-col {
      .left-span {
        font-size: 14px;
        color: #a7b1c7;
        width: 120px;
        text-align: right;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
      }
      .right-span {
        // margin-left: 16px;
        padding-left: 16px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70%;
        button {
          vertical-align: top;
        }
      }
      .solt-span {
        padding-left: 16px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 14px;
        white-space: wrap;
        width: 70%;
        button {
          vertical-align: top;
        }
      }
    }
  }
  .solt-info {
    span {
      margin-right: 30px;
      color: #a7b1c7;
      font-size: 16px;
      span {
        padding: 0 8px;
        color: black;
        font-size: 16px;
      }
      .price {
        color: red !important;
      }
    }
  }
  .show-solt {
    width: 200%;
  }
}
</style>
